// import Empty from '@/components/Empty';
// import { Flex } from 'antd';
import { FC } from 'react';
import { useIntl } from 'umi';
import { InfoBlock } from '../components/InfoBlock';
import { InfoField } from '../components/InfoField';
interface IProps {
  data: API.MeterDataDTO;
}

export const Info: FC<IProps> = ({ data }) => {
  // if (!data) {
  //   return (
  //     <Flex justify="center" style={{ width: '100%' }}>
  //       <Empty />
  //     </Flex>
  //   );
  // }
  const intl = useIntl();

  const Items = [
    { label: intl.formatMessage({ id: 'data.numberOfOnline' }), value: data?.upNum, unit: '个' },
    { label: intl.formatMessage({ id: 'data.numberOfOffline' }), value: data?.downNum, unit: '个' },
  ];

  return (
    <div style={{ padding: '20px 30px', marginBottom: 0 }}>
      <InfoBlock title="">
        {Items.map((item, index) => (
          <InfoField key={index} label={item.label} value={item.value} unit={item?.unit} />
        ))}
      </InfoBlock>
    </div>
  );
};
